/*
 * @Description: 头部组件
 * @Project: 
 * @Author: michelle
 * @Date: 2022-02-23 10:50:33
 * @LastEditors: michelle
 * @LastEditTime: 2022-02-23 18:17:40
 * @Modified By: michelle
 * @FilePath: /vite-project/src/components/header/index.jsx
 */
import React, { useState, useMemo } from 'react'
import './index.less'
import { Layout, Badge, Popover, Empty,Avatar,Image } from 'antd'
import { Link } from 'react-router-dom'
import { fullscreen, exitFullscreen, logout } from '@/utils'
import {
    PoweroffOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    BellFilled,
    UserOutlined,
    BugFilled,
    GithubOutlined,
    FullscreenExitOutlined,
    FullscreenOutlined
} from '@ant-design/icons'

const { Header } = Layout
// const popoverList = [
//     { name: '个人中心', path: '/home/setting/base' },
//     { name: '消息通知', path: '/home/setting/notification' },
//     { name: '账号设置', path: '/home/setting/account' }
// ]

const PopoverContent = (
    <div className="popover-content">
        {/* {popoverList.map(el => (
            <Link to={el.path} key={el.name} className="ls">{el.name}</Link>
        ))} */}
        <div className="ls sign-out"  onClick={logout}>
            <PoweroffOutlined style={{ fontSize: '14px', marginRight: '5px' }} />
            退出
        </div>
    </div>
)

const HomeHeader = function ({
    collapsed,
    setCollapsed,
}) {
    const [messageList, setMessageList] = useState([])
    const [unReadCount, setUnReadCount] = useState(0)
    const [isFullscreen, setIsFullscreen] = useState(false)


    const MessageContent = useMemo(() => (
        <div className="message-popover">
            <div className="msg-header item-block">
                <span className="left">站内消息通知</span>
                {/* <Link className="right" to="/home/setting/notification">消息接收管理</Link> */}
            </div>
            {messageList.length > 0 ? (
                <>
                    {messageList.map((item) => (
                        <div className="item-block ls" key={item.id}>
                            <div className="content">{item.content}</div>
                            <div className="date">{item.createdAt}</div>
                        </div>
                    ))}
                    <Link className="item-block ls" to="/home/setting/innerMessage">查看更多</Link>
                </>
            ) : (
                <Empty style={{ padding: '20px 0' }} />
            )}
        </div>
    ), [messageList])

    function handleFullscreen() {
        setIsFullscreen(isFullscreen => {
          isFullscreen ? exitFullscreen() : fullscreen()
          return !isFullscreen
        })
    }

    return (
        <Header>
            <div className="left">
                {collapsed ? (
                    <MenuUnfoldOutlined
                        onClick={setCollapsed}
                        style={{ cursor: 'pointer', fontSize: '20px' }}
                    />
                ) : (
                    <MenuFoldOutlined
                        onClick={setCollapsed}
                        style={{ cursor: 'pointer', fontSize: '20px' }}
                    />
                )}
            </div>
            <ul className="right">
                <Popover content={MessageContent}>
                    <li>
                        <Badge dot={unReadCount > 0}>
                            <BellFilled />
                        </Badge>
                    </li>
                </Popover>
                <li onClick={handleFullscreen}>
                    {isFullscreen ? <FullscreenOutlined /> : <FullscreenExitOutlined />}
                </li>
                <Popover
                    placement="bottomRight"
                    content={PopoverContent}
                >
                    <li>
                        <Avatar src={<Image src="https://joeschmoe.io/api/v1/random" style={{ width: 32 }} />} />
                        <span className="username">
                            米饭
                        </span>
                    </li>
                </Popover>
            </ul>
        </Header>
    )
}

export default HomeHeader
